<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>冒泡</title>
        <style type="text/css">
            * { border: 1px solid transparent ; margin: 25px ; }
            html { border-color: gray ; } 
            body { border-color: red ; }
            div { border-color: blue ; height: 100px ; }
        </style>
    </head>
    <body>

        <div></div>

        <script type="text/javascript">
            const root = document.getRootNode();
            // 直接通过document的html属性可以获得html元素
            const html = document.html ; 
            const body = document.body ;
            const div = document.querySelector( 'div' );

            const type = 'click' ;

            const listener = function(e){
                console.log( '事件阶段: ' , e.eventPhase );
                let t = e.target ; // 获得事件目标
                console.log( '事件目标:' , t );
                console.log( '当前节点:' , this );
            }

            // 指定在捕获冒泡处理事件
            const useCapture = false ;

            div.addEventListener( type , listener ,  useCapture );
            body.addEventListener( type , listener ,  useCapture );
            // html.addEventListener( type , listener ,  useCapture );
            root.addEventListener( type , listener ,  useCapture );
            window.addEventListener( type , listener ,  useCapture );
        </script>
        
    </body>
</html>